<!-- 音频消息 -->
<template>
    <div :class="'audio-msg audio-msg-'+(isMineSend?'right':'left')" @click="playAudio">
        <div class="sec">
            {{allSec}}<span class="symbol">"</span>
        </div>
        <div class="icon-warp">
            <i :class="'iconfont icon-icon-yuyin icon' + (isPlaying?' icon-play':'')" />
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class AudioMsgCom extends Vue {

    // 当前的html播放器
    private player:HTMLAudioElement = new Audio()

    // 消息的url
    @Prop({type:String, required:true})
    public content:any

    // 是否是本人发送
    @Prop({type:Boolean, default:false})
    public isMineSend:boolean|any

    // 音频的时长(秒)
    public allSec:number = 0

    // 当前是否正在播放语音
    public isPlaying:boolean = false

    beforeMount() {
        // 添加音频准备完毕事件
        this.player.addEventListener('canplay', async()=>{
            while(this.player.duration === Infinity){
                await new Promise((r) => setTimeout(r,200))
                this.player.currentTime = 10000000 * Math.random();
            }
            this.allSec = Math.round(this.player.duration)
        })
        // 添加开始/停止播放事件
        this.player.onplay = ()=> this.isPlaying = true;
        this.player.onpause = ()=> this.isPlaying = false;
        this.player.src = this.content
        this.player.load()
    }

    // 播放语音
    public playAudio(){
        const player = this.player
        if(!player.paused){
            player.pause()
        }else{
            this.player.currentTime = 0
            player.play()
        }
    }

}
</script>

<style lang="less" scoped>
@import '../../css/iconfont.less';
.audio-msg{
    display: flex;
     align-items: center;
    .sec{
        font-size: 10px;
    }
    .icon-warp{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 16px;
    }
        // 播放动画
    @keyframes play {
        0%{width: 5px;}
        33%{width: 8px;}
        66%{width: 16px;}
        100%{width: 5px;}
    }
    .icon-play{
        overflow: hidden;
        width: 16px;
        animation: play 1.2s steps(1, end) infinite;
    }
}
.audio-msg-right{
    .sec{
        padding: 0 5px 0 10px;
    }
    .icon-warp{
        transform: rotate(180deg);
    }
}
.audio-msg-left{
    flex-direction: row-reverse;
    .sec{
        padding: 0 10px 0 5px;
    }
}
</style>